<!--记录-->
<template>
  <div id="blog">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 左菜单 -->
    <div class="LeftMenu">
      <!--父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed-->
      <!--data方式：在父组件中通过 v-bind:xx 传值 v-bind: 简写 :xx-->
      <LeftMenu v-bind:fromPath=fromPath></LeftMenu>
    </div>
    <!-- 右菜单 -->
    <div class="RightMenu">
      <RightMenu></RightMenu>
    </div>
    <!-- 散记头部栏 -->
    <div class='logMenu'>
      <router-link v-for='(item,i) in logTypes' :key='i' to='' class='logMenus' @click.native="searchType(item.name)">
        <el-tag effect="" class='logMenuItem' :style="logMenuItemStyle(item.name)">
          {{ item.name }}
        </el-tag>
      </router-link>
    </div>
    <!-- 散记左边栏 -->
    <div class="logLeft">
      <!--日历：各日期标记其散记数量-->
      <el-divider>日历</el-divider>
      <el-calendar :v-model="new Date()" style="">
        <template slot="dateCell" slot-scope="{date, data}">
          {{ data.day.split('-').slice(2).join('-') }}
          <div style="width:100%;" v-for="(item, index) in calenderData" :key="index">
            <el-tag v-if="(item.day)===data.day" type="success" style="height: 25px;margin-top: -3px;">
              +{{ item.count }}
            </el-tag>
          </div>
        </template>
      </el-calendar>
      <!--时间归档-->
      <el-collapse @change="" accordion>
        <el-divider>归档</el-divider>
        <el-collapse-item v-for="(item, index) in logMarkData" :key="index" :title="'.'+item.month">
          <el-timeline>
            <el-timeline-item v-for="(it, index) in item.item" :key="index" :timestamp="it.time"
                              @click.native="detail(item.id)" style="cursor: pointer;">
              <div style="color: dodgerblue;">{{ it.title }}</div>
              <div style="color: lightslategrey;font-size: 13px;">
                {{ it.type }}
                <el-divider direction="vertical"></el-divider>
                {{ it.subtype }}
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 散记中部栏 -->
    <div class="logMiddle">
      <!-- 散记搜素 -->
      <p class="logSearch">
        <el-input clearable class="input-with-select logSelect" placeholder=" 请输入关键词" v-model="inputValue"
                  :title="inputValue" :style="logSelectStyle" @input.native="logSelectInput()"
                  @mouseleave.native="logSelectInput()" @keyup.enter.native="page(inputValue,selectedType)">
          <el-select v-model="selectedType" slot="prepend" placeholder="全部">
            <el-option v-for="type in logTypes" :key="type.index" :label="type.name" :value="type.name "></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="page(inputValue,selectedType)"
                     title="搜素"></el-button>
        </el-input>
        <span class="logSelectTag">
         <span class="selectTime" @click="selectTag(selectTime)"><i :class="selectTimeClass"></i>{{ selectTime }}</span>
         <span class="selectStar" @click="selectTag(selectStar)"><i :class="selectStarClass"></i>{{ selectStar }}</span>
         <span class="selectWordage" @click="selectTag(selectWordage)"><i
           :class="selectWordageClass"></i>{{ selectWordage }}</span>
        </span>
      </p>
      <!-- 散记卡片 -->
      <div class="blog">
        <span style="width:100%;" v-loading="searchLoading"></span>
        <p v-show="!logData.length&&!searchLoading" class="emptyBox" @click="searchType">
          <el-tooltip placement="top" effect="light" style="margin-top: 10%">
            <span slot="content" style="color: cornflowerblue"> >^< 点击返回全部 </span>
            <el-empty description=" " style="cursor: grab;color: silver">空盒子</el-empty>
          </el-tooltip>
        </p>
        <el-row v-for="(item, index) in logData" :key="index" class="logCardRow" type="flex" justify="center"
                :style="logCardRowStyle(item.blurb.length)" title="点击查看">
          <el-col class="logCardCol">
            <div class="logCardItem" @click="detail(item.id)">
              <div>
                <p class="cardItTitle" @click="detail(item.id)">{{ item.title }}</p>
                <p class="itemBlurb" @click="detail(item.id)">{{ item.blurb }}</p>
                <p style="font-size: 13px;color: #555;">
                  <i class="el-icon-collection-tag" title="类型"></i>&ensp;{{ item.type }}&emsp;
                  <i class="el-icon-edit" title="作者"></i>&ensp;{{ item.author }}&emsp;
                  <i class="el-icon-time" title="时间"></i>&ensp;{{ item.createTime }}&emsp;
                  <el-tooltip placement="bottom-start" effect="light">
                    <span slot="content" style="color: lightseagreen"> >^< 点亮星星 </span>
                    <i class="el-icon-star-off logStarLit" title="" @click="starLit(item.id,1)">
                    </i></el-tooltip>&ensp;{{ item.starNum }}&emsp;
                  <!--操作返回提示-->
                  <span class="ctlReturnMsg" v-show="item.id===ctlReturnId">
                          <i class="el-icon-success ctlReturnMsg"></i>{{ ctlReturnMsg }}</span>
                </p>
              </div>
              <div v-if="item.images"><img :src="item.images" alt=" " title=""></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 散记页脚 -->
      <div class="logPageLimit" ref="pageLimit" hidden>
        <el-button type="primary" icon="el-icon-d-arrow-left" @click="lastNumPage(5)" title="上五页"
                   @contextmenu.prevent.stop.native="lastNumPage(0)"></el-button>
        <el-button type="primary" icon="el-icon-arrow-left" @click="lastPage" title="上一页"></el-button>
        <el-button type="primary" v-for="i in pageNums" :key="i" @click="numPage(i+1)" :style="numPageStyle(i+1)">
          {{ i + 1 }}
        </el-button>
        <el-button type="primary" icon="el-icon-arrow-right" @click="nextPage" title="下一页"></el-button>
        <el-button type="primary" icon="el-icon-d-arrow-right" @click="nextNumPage(5)" title="下五页"
                   @contextmenu.prevent.stop.native="nextNumPage(0)"></el-button>
      </div>
    </div>
    <!-- 散记右边栏 -->
    <div class='logRight'>
      <!-- 排行-->
      <div class="rank">
        <el-divider>排行</el-divider>
        <p v-for="(item, index) in 10" :key="index" :style="rankColor[index]+'padding-left: 1px;padding-bottom: 6px;'">
          {{ item }}:---------------------------------------------------------------------------------
        </p>
      </div>

      <div class="stat">
        <el-divider>统计</el-divider>
        <Stat></Stat>
      </div>

    </div>
    <!-- 页脚 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../../components/head/LeftMenu'
import TopNav from '../../../components/head/TopNav'
import Footer from '../../../components/foot/Footer'
import RightMenu from "../../../components/head/RightMenu";
import blog from '../../../apis/blog'
import Stat from '../../../components/body/statBall'

import '../../../assets/css/CodeWeb.css';
import CodeWebJs from "../../../assets/js/CodeWeb";

export default {
  name: 'blog',
  components: {LeftMenu, RightMenu, TopNav, Stat, Footer},

  data() {
    return {
      fromPath: "/",
      logMarkData: [
        {
          month: "2023-10",
          item: [
            {
              time: "10-24 12:00",
              title: "java stream",
              type: "编程",
              subtype: "java",
              id: 1,
            },
            {
              time: "10-24 12:00",
              title: "vue json",
              type: "编程",
              subtype: "vue",
              id: 2,
            },
          ]
        },
        {
          month: "2023-09",
          item: [
            {
              time: "09-24 12:00",
              title: "java stream",
              type: "编程",
              subtype: "java",
              id: 1,
            },
          ]
        },
        {
          month: "2023-08",
          item: [
            {
              time: "09-24 12:00",
              title: "java stream",
              type: "编程",
              subtype: "java",
              id: 1,
            },
          ]
        },
        {
          month: "2023-07",
          item: [
            {
              time: "09-24 12:00",
              title: "java stream",
              type: "编程",
              subtype: "java",
              id: 1,
            },
          ]
        },
        {
          month: "2023-06",
          item: [
            {
              time: "09-24 12:00",
              title: "java stream",
              type: "编程",
              subtype: "java",
              id: 1,
            },
          ]
        },
      ],
      calenderData: [
        {
          day: CodeWebJs.getDateToKey(new Date(), "day", "-"),
          count: 1,
        },
        {
          day: "2023-09-03",
          content: "2",
        },
      ],
      inputValue: '',
      searchLoading: '',
      selectTime: "最新",
      selectStar: "最多星星",
      selectWordage: "最多字数",
      selectTimeClass: "el-icon-caret-bottom",
      selectStarClass: "el-icon-caret-bottom",
      selectWordageClass: "el-icon-caret-bottom",
      selectTimeDesc: "desc",
      selectStarDesc: "desc",
      selectWordageDesc: "desc",
      pageOrders: "desc,createTime;desc,starNum;desc,wordage;",
      pageNum: 1, //初始页
      pageNums: [], //页数组
      pageSize: 10, //    每页的数据
      logData: '',
      pageTotal: 0,
      detailPath: "space/blog/detail",
      ctlReturnId: '',
      ctlReturnMsg: '',
      logTypes: [
        {name: '全部', types: []},
        {name: '编程', types: ["JAVA", "C", "C++", "PYTHON", "PHP", "C#", "GO", "VUE"]},
        {name: '机电', types: ["机电",]},
        {name: '数学', types: ["数学",]},
        {name: '物理', types: ["物理",]},
        {name: '天文', types: ["天文",]},
        {name: '地理', types: ["地理",]},
        {name: '文学', types: ["文学",]},
        {name: '化学', types: ["化学",]},
        {name: '生物', types: ["生物",]},
        {name: '医学', types: ["法学",]},
        {name: '法学', types: ["法学",]},
        {name: '外语', types: ["法学",]},
        {name: '艺术', types: ["艺术",]},
      ],
      selectedType: '全部',
      logSelectStyle: 'width: 35%;',
      selectedTypes: [],
      rankColor: ['color: red;', 'color: orangered;', 'color: orange;', 'color: yellow;', 'color: springgreen;', 'color: cyan;',
        'color: dodgerblue;', 'color: steelblue;;', 'color: dimgrey;', 'color: slategrey;',],

    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {          //  这里的vm指的就是vue实例，可以用来当做this使用
      //console.log(to, from, next)
      //console.log("fromPath", from.path, vm.fromPath)
      if (!from.path.includes("/detail" || "/manage")) {
        vm.fromPath = from.path;
      } else {
        vm.fromPath = "/"
      }
      //console.log("fromPath", from.path, vm.fromPath)
    })
  },
  created() {
    this.selectedType = this.$route.query.type
    this.searchType(this.selectedType);
  },
  methods: {
    logMenuItemStyle(type) {
      let style = "font-size: 15px;border: none;border-radius: unset;color: lightcyan;"
      if (type === this.selectedType) {
        return style + "background: deepskyblue;";
      } else {
        return style + "background: steelblue;";
      }
    },
    logSelectInput(e) {
      this.logSelectStyle = this.inputValue.length ? 'width: 50%;' : 'width: 35%;';
    },
    selectTag(tag) {
      if (tag === this.selectTime) {
        this.selectTime = this.selectTime === "最新" ? "最旧" : "最新";
        this.selectTimeClass = this.selectTimeClass === "el-icon-caret-bottom" ? "el-icon-caret-top" : "el-icon-caret-bottom";
        this.selectTimeDesc = this.selectTimeDesc === "desc" ? "asc" : "desc";
        this.pageOrders = this.selectTimeDesc + ",createTime;" + this.selectStarDesc + ",starNum;" + this.selectWordageDesc + ",wordage;";
      }
      if (tag === this.selectStar) {
        this.selectStar = this.selectStar === "最多星星" ? "最少星星" : "最多星星";
        this.selectStarClass = this.selectStarClass === "el-icon-caret-bottom" ? "el-icon-caret-top" : "el-icon-caret-bottom";
        this.selectStarDesc = this.selectStarDesc === "desc" ? "asc" : "desc";
        this.pageOrders = this.selectStarDesc + ",starNum;" + this.selectTimeDesc + ",createTime;" + this.selectWordageDesc + ",wordage;";
      }
      if (tag === this.selectWordage) {
        this.selectWordage = this.selectWordage === "最多字数" ? "最少字数" : "最多字数";
        this.selectWordageClass = this.selectWordageClass === "el-icon-caret-bottom" ? "el-icon-caret-top" : "el-icon-caret-bottom";
        this.selectWordageDesc = this.selectWordageDesc === "desc" ? "asc" : "desc";
        this.pageOrders = this.selectWordageDesc + ",wordage;" + this.selectTimeDesc + ",createTime;" + this.selectStarDesc + ",starNum;";
      }
      if (this.logData.length) {
        this.page(this.inputValue, this.selectedType);
      }
    },
    searchType(type) {
      this.inputValue = "";
      this.selectedType = type ? type : '全部';
      this.page('', type);
    },
    page(keyword, type) {
      this.searchLoading = true;
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pageOrders: this.pageOrders,
        keyword: keyword,
        type: type === '全部' ? '' : type,
      };
      if (keyword || type) {
        blog.myPage(data).then((res) => {
          //console.log(res);
          this.searchLoading = '';
          if (res.status === 200 && res.data.records) {
            this.logData = res.data.records;
            this.pageTotal = res.data.total
            if (this.pageTotal > this.pageSize) {
              this.$refs.pageLimit.hidden = false;
              this.pageNums = this.pageNumsCount(this.pageTotal);
            } else {
              this.$refs.pageLimit.hidden = true;
            }
          } else {
            console.log(res);
          }
        })
      } else {
        blog.page(data).then((res) => {
          //console.log(res);
          this.searchLoading = '';
          if (res.status === 200 && res.data.content) {
            this.logData = res.data.content;
            this.pageTotal = res.data.totalElements
            if (this.pageTotal > this.pageSize) {
              this.$refs.pageLimit.hidden = false;
              this.pageNums = this.pageNumsCount(this.pageTotal);
            } else {
              this.$refs.pageLimit.hidden = true;
            }
          } else {
            console.log(res);
          }
        })
      }
      //延迟5秒后开始间隔10秒重新请求
      setTimeout(() => {
        if (this.searchLoading && !this.pageInterval) {
          this.pageInterval = setInterval(() => this.page(keyword, type), 10000);
        } else {
          clearInterval(this.pageInterval);
        }
      }, 10000);
    },
    logCardRowStyle(length) {
      //最后一页卡片高度处理
      if (Math.ceil(this.pageTotal / this.pageSize) === this.pageNum) {
        if (length > 100) {
          return 'height: auto%;';
        } else {
          return 'height: 20%;';
        }
      } else {
        return 'height: auto;';
      }
    },
    ////分页数组计算函数--length要为偶数
    pageNumsCount(total, length) {
      length = length === undefined ? 10 : length;
      //总页数为总条数除页量有余进一
      let pageNums = [...new Array(Math.ceil(total / this.pageSize)).keys()]
      //总页数大于10当前页大于5开始截取总页数显示为当前页-4（下标多减1）到当前页+5
      if (pageNums.length > length && this.pageNum > length / 2) {
        //splice(start,count) 函数是 从 start 下标开始截取共 count 个数
        pageNums = pageNums.splice(this.pageNum - length / 2, length);
      } else {
        pageNums = pageNums.splice(0, length)
      }
      return pageNums;
    },
    numPage(num) {
      this.pageNum = num
      this.page();
    },
    numPageStyle(i) {
      if (i === this.pageNum) {
        return "background: steelblue;"
      }
    },
    lastPage() {
      if (--this.pageNum < 1) {
        this.pageNum = 1
        return;
      }
      this.page();
    },
    nextPage() {
      if (++this.pageNum > this.pageNums.length) {
        this.pageNum = this.pageNums.length
        return;
      }
      this.page();
    },
    lastNumPage(num) {
      if (this.pageNum === 1) {
        return;
      }
      if (num === 0) {
        this.pageNum = 1
        this.page();
        return;
      }
      if (this.pageNum - num < 1) {
        this.pageNum = 1
      } else {
        this.pageNum = this.pageNum - num
      }
      this.page();
    },
    nextNumPage(num) {
      let totalPageNum = Math.ceil(this.pageTotal / this.pageSize)
      if (this.pageNum === totalPageNum) {
        return;
      }
      if (num === 0) {
        this.pageNum = totalPageNum
        this.page();
        return;
      }
      if (this.pageNum + num > totalPageNum) {
        this.pageNum = totalPageNum
      } else {
        this.pageNum = this.pageNum + num
      }
      this.page();
    },
    detail(id) {
      console.log(id);
      this.$router.push({name: this.detailPath, params: {id: id}});
    },
    //点亮星星>^<
    starLit(id, num) {
      this.detailPath = "";
      let data = {};
      data.id = id
      data.starNum = num
      blog.editMark(data)
        .then((res) => {
          console.log(res);
          this.loading = false;
          if (res.status === 200 && res.data.finish) {
            this.ctlReturnId = id;
            this.ctlReturnMsg = '星星+1';
            this.detailPath = "blog/detail";
            setTimeout(() => {
              this.ctlReturnId = '';
              this.ctlReturnMsg = '';
            }, 2000);
            this.page();
          } else {
            this.ctlReturnId = '';
            this.ctlReturnMsg = '';
            this.$notify.info({
              message: ">_< 星星点亮失败，请稍后再试...",
              position: 'bottom-right',
              showClose: false,
            })
            console.log(res);
          }
        })
    },
  }
  ,
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#blog {
  background: url("src/assets/image/treeMoon.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
}

.RightMenu {
  float: right;
}

.TopNav {
}

.footer {
}

.logMenu {
  position: absolute;
  width: 80%;
  height: 40px;
  margin-left: 10%;
  margin-top: -20px;
  text-align: center;
  overflow: auto;
  font-weight: initial;
  z-index: 2;
}

.logMenus {
  padding: 2px;
}

.logMenuItem {
  width: 70px;
  height: 30px;
  /*font-size: 15px;
  color: lightcyan;
  background: steelblue;
  border: none;
  border-radius: unset;*/
}

.logMenuItem:hover {
  /*color: white;
  background: deepskyblue;*/
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 0 5px 10px 0 azure;
}

/*散记左边栏*/
.logLeft {
  position: absolute;
  width: 19%;
  height: 90%;
  margin-top: 3%;
  margin-left: 0.5%;
  opacity: 0.95;
  overflow: auto;
}

.logLeft .el-calendar-table .el-calendar-day {
  width: 52px;
  height: 47px;
}

.logLeft .el-calendar-table {
  margin-top: -20px;
  height: 45%;
}

.logLeft .el-collapse {
  height: 50%;
  overflow: unset;
}

/*散记中部栏*/
.logMiddle {
  position: absolute;
  width: 60%;
  height: 100%;
  margin-top: 2%;
  margin-bottom: 2%;
  margin-left: 21%;
  opacity: 0.95;
}

/*散记搜索*/
.logSearch {
  width: 98.5%;
  height: 30px;
  margin: 0.5%;
  /*text-align: center;*/
}

.logSelect {
}

.logSelect .el-select .el-input {
  width: 70px;
}

.logSelectTag {
  width: 50%;
  color: white;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.6;

}

.logSelectTag i {
  font-size: 19px;
}

.selectTime {
  margin-left: 2%;
}

.selectTime:hover {
  color: lime;
}

.selectStar {
  margin-left: 2%;
}

.selectStar:hover {
  color: lime;
}

.selectWordage {
  margin-left: 2%;
}

.selectWordage:hover {
  color: lime;
}

/*散记分页卡片和页脚*/
.emptyBox {
  position: absolute;
  width: 90%;
  height: 70%;
  margin: 5%;
  background: white;
  overflow: auto;
}

.blog {
  height: 78%;
  margin-top: 1%;
  /*添加滚动条*/
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  /*border-top: thick dotted lightskyblue;*/
  border-left: thin solid linen;
  border-right: thin solid linen;

}

.logCardRow {
  width: 100%;
  cursor: pointer;
}

.logCardCol {
  padding: 0.7%;
  background: transparent;
}

.logCardItem {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 0.5%;
  background: white;
  color: dimgrey;
}

.logCardItem:hover {
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 0 3px lime;
  border-top: thin dotted cyan;
}

.cardItTitle {
  font-size: 17px;
  margin: 10px;
  color: dodgerblue;
}

.cardItTitle:hover {
  color: deepskyblue;
}

.itemBlurb {
  font-size: 15px;
  color: #444;
}

.itemBlurb:hover {
  color: #666;
}

.logCardItem p {
  margin-left: 10px;
  margin-right: 10px;
}

.logCardItem img {
  width: 100px;
  height: 90px;
  margin-top: 20px;
}

.logStarLit {
  color: dodgerblue;
  font-size: 15px;
}

.logStarLit:hover {
  color: lightgreen;
  font-size: 20px;
  margin-top: -5px;
  cursor: grab;
}

.ctlReturnMsg {
  color: lightseagreen;
  font-size: 14px;
  text-align: center;

}

.logPageLimit {
  margin-top: 0.5%;
  text-align: center;
}

.logPageLimit button {
  background: lightsteelblue;
  width: 33px;
  height: 30px;

}

/*散记右边栏*/
.logRight {
  position: absolute;
  width: 17%;
  height: 90%;
  margin-top: 3%;
  margin-left: 82.5%;
  overflow: auto;
  opacity: 0.95;

}

.logRight::-webkit-scrollbar {
  height: 0;
}

.rank {
  height: 435px;
  text-overflow: ellipsis;
  /*文本不换行，这样超出一行的部分被截取，显示...*/
  white-space: nowrap;
}

.stat {
}

/*----共用组件start----*/

#blog .el-divider {
  /*margin-bottom: 10px;*/
  background: lightsteelblue;
}

#blog .el-divider__text {
  background: transparent;
  color: lightskyblue;
}

/*滚动条整体*/

/*----公共组件end----*/

</style>
